.wrapper {
   position: relative;
   
   &:hover {
      .rightHandle,
      .bottomHandle {
         opacity: 1;
      }
   }
}

.rightHandle,
.bottomHandle {
   position: absolute;
   opacity: 0;
   right: 0;
   transition: opacity 0.2s;
   z-index: 9999;

   @media (max-width: 825px) {
      display: none;
   }
}

.rightHandle {
   top: 0;
   bottom: 0;
}

.bottomHandle {
   bottom: 0;
   left: 0;
}

.handle {
   position: absolute;
   background-color: transparent;
   transition: background-color 0.2s;

   &.horizontal {
      cursor: ew-resize;
      height: 100%;
      width: 16px;
      top: 0;
      right: 0;
      border-radius: 0 10rem 10rem 0;

      .indicator {
         width: 4px;
         height: 32px;
         top: 50%;
         right: 0;
         transform: translate(-50%, -50%);
      }
   }

   &.vertical {
      cursor: ns-resize;
      width: 100%;
      height: 16px;
      bottom: 0;
      left: 0;
      border-radius: 0 0 10rem 10rem;

      .indicator {
         width: 32px;
         height: 4px;
         left: 50%;
         bottom: 0;
         transform: translate(-50%, -50%);
      }
   }
}

.indicator {
   position: absolute;
   background-color: #4a4e51;
   transition: background-color 0.2s;
   border-radius: 10rem;

   .handle:hover & {
      background-color: #6a7074;
   }
}
